<template>
  <div ref="echartDom"></div>
</template>

<script setup>
import {ref, defineProps, onMounted, onUnmounted, inject, shallowRef, defineExpose} from 'vue'
import {pxToRem} from "@/utils/index";

const props = defineProps({
  pieData: {
    type: Array,
    default: () => []
  },
  dialogData: {
    type: Object,
    default: () => ({
      fontSizeTimes: 1
    })
  }
});

const echartDom = ref(null);
const myChart = shallowRef(null);
const echarts = inject('echarts');

const initEchart = () => {
  if (echartDom.value) {
    myChart.value = echarts.init(echartDom.value);
    let totalValue = 0
    let tempDataList = props?.pieData?.seriesData
    for (let i = 0; i < tempDataList.length; i++) {
      totalValue += tempDataList[i].value;
    }
    let option = {
      title: {
        text: `{a|${totalValue}}\n{b|烂尾原因}`,
        textStyle: {
          color: 'white',
          rich: {
            a: {
              fontSize: pxToRem(16 * props?.dialogData?.fontSizeTimes),
              align: "center",
            },
            b: {
              fontSize: pxToRem(14 * props?.dialogData?.fontSizeTimes),
              align: "center",
              lineHeight: pxToRem(28 * props?.dialogData?.fontSizeTimes)
            }
          },
        },
        itemGap: pxToRem(props?.dialogData?.fontSizeTimes === 1 ? -90 : -240),
        subtext: '{b|项目数}{c|占比}',
        subtextStyle: {
          rich: {
            b: {
              width: pxToRem(props?.dialogData?.fontSizeTimes === 1 ? 220 : 740),
              fontSize: pxToRem(16 * props?.dialogData?.fontSizeTimes),
              color: 'white',
              align: "right",
            },
            c: {
              width: pxToRem(50 * props?.dialogData?.fontSizeTimes),
              fontSize: pxToRem(16 * props?.dialogData?.fontSizeTimes),
              color: 'white',
              align: "right",
            },
          }
        },
        x: pxToRem(props?.dialogData?.fontSizeTimes === 1 ? 30 : 162),
        y: pxToRem(props?.dialogData?.fontSizeTimes === 1 ? 58 : 260),
      },
      tooltip: {
        show: true,
        formatter: '{b} {c}个 \t{d}%',
        position: (point) => {
          return [point[0], point[1]]
        }
      },
      legend: {
        type: 'scroll',
        orient: 'vertical',
        top: `${props?.dialogData?.fontSizeTimes === 1 ? 25 : 30}%`,
        right: `${props?.dialogData?.fontSizeTimes === 1 ? 2 : 10}%`,
        itemHeight: pxToRem(12 * props?.dialogData?.fontSizeTimes),
        itemWidth: pxToRem(12 * props?.dialogData?.fontSizeTimes),
        itemGap: pxToRem(10 * props?.dialogData?.fontSizeTimes),
        width: pxToRem(20 * props?.dialogData?.fontSizeTimes),
        padding: [0, 0, 0],
        pageButtonItemGap: 0,
        pageIconColor: 'white',
        pageIconInactiveColor: '#A9A9A9',
        pageIconSize: pxToRem(10 * props?.dialogData?.fontSizeTimes),
        pageTextStyle: {
          color: 'white',
          fontSize: pxToRem(10 * props?.dialogData?.fontSizeTimes),
        },
        textStyle: {
          rich: {
            one: {
              width: pxToRem(props?.dialogData?.fontSizeTimes === 1 ? 70 : 300),
              height: pxToRem(30 * props?.dialogData?.fontSizeTimes),
              color: 'white',
              fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes),
            },
            two: {
              width: pxToRem(60 * props?.dialogData?.fontSizeTimes),
              height: pxToRem(30 * props?.dialogData?.fontSizeTimes),
              color: 'white',
              fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes),
            },
          },
        },
        formatter: (name) => {
          let targetObj = tempDataList.find(x => x.name === name)
          const num = props?.dialogData?.fontSizeTimes === 1 ? 3: 10
          if (name.length > num) {
            // 如果名称长度超过10，则截取前5个字符和后5个字符，中间使用省略号
            return `{one|${name.substring(0, num)}...}{two|${targetObj.value}} {two|${targetObj.percentage}%}`;
          } else {
            return `{one|${name}}{two|${targetObj.value}} {two|${targetObj.percentage}%}`;
          }
        },
        tooltip: {
          show: true,
          formatter: (res) => {
            let targetObj = tempDataList.find(x => x.name === res.name)
            return `项目名称：${res.name}</br>项目数：${targetObj.value}</br>占比：${targetObj.percentage}%`;
          }
        },
      },
      series: [
        {
          type: 'pie',
          radius: ['50%', '65%'],
          center: ['20%', '60%'],
          clockwise: true,
          zIndex: 1,
          avoidLabelOverlap: true,
          label: {
            show: false,
          },
          labelLine: {
            //label线的长度
            show: false,
          },
          itemStyle: {
            normal: {
              borderWidth: pxToRem(5),
            }
          },
          data: props?.pieData?.seriesData
        }
      ]
    }
    option && myChart.value.setOption(option, true);

    myChart.value.on("legendselectChanged", (params) =>{
      event.stopPropagation();
    });

    myChart.value.on('legendscroll', (params) => {
      event.stopPropagation();
    });
  }
}

const updateChart = () => {
  if (myChart.value) {
    myChart.value.dispose(); // 销毁旧图表实例
  }
  initEchart();
};

defineExpose({
  updateChart
})

onMounted(() => {
  initEchart();
  window.addEventListener("resize", updateChart);
})

onUnmounted(() => {
  window.removeEventListener("resize", updateChart);
})
</script>

<style scoped lang="less">
.h135 {
  height: 135px;
}
.dialog-h135 {
  width: 1120px;
  height: 500px;
}
</style>